<template>
  <div class="upload-demo">
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>多文件上传</span>
      </div>
      <div class="text item">
        <el-upload class="upload-demo"
                   ref="upload"
                   action="/api/file/upload"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :file-list="fileList"
                   :auto-upload="false"
                   :multiple="true"
                   :on-success="handleSuccess"
                   :on-error="handleError">
          <el-button slot="trigger"
                     size="small"
                     type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;"
                     size="small"
                     type="success"
                     @click="submitUpload">上传到服务器</el-button>
          <div slot="tip"
               class="el-upload__tip">多文件上传，单个文件大小限制50M</div>
        </el-upload>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "",
        // },
      ],
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
      // console.log(this.$refs.upload.uploadFiles[0])
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleSuccess(res, file, fileList) {
      // console.log(res)
      console.log(`文件：${file.name}  上传成功`);
      // console.log(fileList)
    },
    handleError(err, file, fileList) {
      console.error(`文件：${file.name}  上传失败`);
    },
  },
};
</script>

<style scoped>
.upload-demo {
  /* width: 500px; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
